<template>
  <div>
    <div class="share-page">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item>系统设置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/role-list' }"
          >角色列表</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="monitoring-content">
      <div class="title">角色列表</div>
      <div class="tables">
        <div class="search">
          <el-form :inline="true" :model="formInline" style="width: 100%">
            <div class="search-item">
              <div class="flex-s">
                <el-button
                  class="mx-10"
                  round
                  color="#0071bb"
                  :icon="Plus"
                  @click="addRole"
                  >新增角色</el-button
                >
                <el-form-item label="搜索条件">
                  <el-input
                    v-model="formInline.region"
                    placeholder="请输入搜索条件"
                    style="width: 200px"
                  >
                  </el-input>
                </el-form-item>
                <span class="btn">
                  <el-button round color="#0071bb" :icon="Search"
                    >搜索</el-button
                  >
                  <el-button round :icon="RefreshLeft">重置</el-button>
                  <el-button round :icon="Refresh">刷新</el-button>
                </span>
              </div>
              <span class="btn">
                <el-dropdown :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button round color="#0071bb" :icon="HelpFilled"
                      >筛选</el-button
                    >
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu style="max-height: 300px">
                      <el-dropdown-item
                        v-for="(item, index) in checkArr"
                        :key="index"
                        @click.stop="filterTableData(item)"
                      >
                        <el-checkbox
                          v-model="item.show"
                          size="large"
                          :label="item.label"
                        />
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </span>
            </div>
          </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            v-for="(item, index) in headerArr"
            :key="index"
          >
            <template #default="scope">
              <div v-if="item.prop == 'status'" class="type2">
                {{ scope.row.status }}
              </div>
              <div v-if="item.prop == 'btn'">
                <el-button size="small" type="primary">操作日志</el-button>
                <el-button size="small" type="warning">编辑</el-button>
                <el-button size="small" type="danger">停用</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部分页 -->
      <div class="page_number">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :size="size"
          :disabled="disabled"
          layout="prev, pager, next, jumper,total"
          :total="10"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from "vue";
import type { ComponentSize } from "element-plus";
import { useRouter } from "vue-router";
import {
  Refresh,
  Search,
  RefreshLeft,
  HelpFilled,
  Plus,
} from "@element-plus/icons-vue";
const currentPage = ref(1);
const pageSize = ref(1);
const size = ref<ComponentSize>("small");
const disabled = ref(false);
const tableData = [
  {
    id: "1",
    name: "伯克材料3668649",
    step: "派单",
    type: "离线报警",
    status: "正常",
  },
  {
    id: "1",
    name: "伯克材料3668649",
    step: "派单",
    type: "离线报警",
    status: "正常",
  },
];
const formInline = ref({
  region: "",
});
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
// 列表选中的属性
const checkArr = ref<any>([
  { label: "创建时间", prop: "type", show: true },
  { label: "姓名", prop: "name", show: true },
  { label: "登录账号", prop: "step", show: true },
  { label: "角色类型", prop: "type", show: true },
  { label: "最后登录IP", prop: "name", show: true },
  { label: "最后登录时间", prop: "step", show: true },
  { label: "状态", prop: "status", show: true },
  { label: "操作", prop: "btn", show: true },
]);
const headerArr = ref<any>([
  { label: "创建时间", prop: "type", show: true },
  { label: "姓名", prop: "name", show: true },
  { label: "登录账号", prop: "step", show: true },
  { label: "角色类型", prop: "type", show: true },
  { label: "最后登录IP", prop: "name", show: true },
  { label: "最后登录时间", prop: "step", show: true },
  { label: "状态", prop: "status", show: true },
  { label: "操作", prop: "btn", show: true, width: "300px" },
]);
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true);
  }, 500);
};
const router = useRouter();
const addRole = (item: any) => {
  router.push("/role-add");
};
</script>
<style lang="scss" scoped>
.el-button--primary {
  background: rgb(0, 113, 187);
}
.el-button--warning {
  background: rgb(246, 146, 30);
}
.el-button--danger {
  background: rgb(255, 0, 0);
}
.title {
  color: #4d4d4d;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}
.monitoring-content {
  background: #fff;
  padding: 10px 10px 0px 10px;
}

.search {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 10px;
  padding: 0 10px;
}
.search-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .btn {
    align-self: right;
  }
}
.mx-10 {
  margin: 0px 10px;
}
.flex-s {
  display: flex;
  align-content: center;
  justify-content: start;
}
.page_number {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

.tables {
  margin-top: 10px;
}
.type2 {
  color: #71abd8;
}
</style>
